<template>
   <div class="rechargelist">
    <wxc-minibar title="充值记录">
      <!-- <div class="header-con" slot="middle">
           <text class="header-title">充值记录</text>
      </div> -->
    </wxc-minibar>
    <div>
         <scroller class="scroller" style="position:fixed;top:90px;bottom:0;left:0;right:0;background-color: #F5F5F5;">
            <div class="rechargelist_item" v-for="(item,index) in rechargelist" :key="index">
                <div class="rechargelist_item_fl">
                   <div class="rechargelist_item_fl_first">
                     <text class="rechange_titletxt">{{item.detail}}</text>
                       <!-- <text :class="[item.status == 'FAILURE'?'fail':'nofail']">{{item.status | filtersstatus}}</text> -->
                   </div>
                   <div class="rechargelist_item_fl_second">
                       <text style="font-size: 24px;color: #A7A7A7;">充值</text>
                   </div>
                </div>
                <div class="rechargelist_item_fr">
                    <text class="recharge_rmb">+{{item.money | fixed}}</text>
                     <text class="recharge_time">{{item.createTime | filtertime}}</text>
                </div>
            </div>
            <div class="norecord" v-if="rechargelist.length==0">
               <image style="width:298.5px;height:298.5px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/norechargerecord.png"></image>
               <text style="font-size: 40px;color: #9E8383;margin-top:75.7px;">暂无充值记录</text>
            </div>
            <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
              <rotate></rotate>
              <!-- <loading-indicator class="indicator"></loading-indicator> -->
            </loading>
         </scroller>
       </div>
    
   </div>
</template>

<script>
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
const modal = weex.requireModule("modal");
const navigator = weex.requireModule('navigator')
import { getBaseUrl, serialize }  from "@/utils/index.js"
import { postResponsesToken } from '@/api.js'
import rotate from "@/components/modules/rotate";
export default {
  data() {
    return {
      current:1,
      size:20,
      loadinging:false,
      rechargelist:[]
    };
  },
  components:{
    WxcMinibar,
    rotate
  },
  filters:{
    filtertime(time) {
	         let date = new Date(+time);
            let formatNum = (num) => { return num < 10 ? "0" + num : num.toString() }
            return `${formatNum(date.getMonth() + 1)}-${formatNum(date.getDate())} ${formatNum(date.getHours())}:${formatNum(date.getMinutes())}`
	},
  fixed(value) {
            return String(value).indexOf('.') ? Number(value).toFixed(2) : value+'.00'
        },
    filtersstatus(value){
		let param = ['处理中', '充值成功', '充值失败']

		return param[+value]
    }
  },
  mounted() {
    // modal.toast({message:111})
    this.getresposeData()
  },
  methods: {
     back(){
       navigator.pop()
	},
	
    async getresposeData(){
		var param = {
			current:this.current,
			size: this.size,
			type:1
		};

		let res =  await postResponsesToken('cash/maccount/cashHistory', param)
        if (res.code == 0) {
           this.rechargelist = this.rechargelist.concat(res.data.All);
           this.loadinging = false
        } else {
          modal.toast({ message: res.msg });
        }
      
    },
    onloading(event) {
      this.loadinging = true;
      this.current ++
      this.getresposeData()
    },

  }
};
</script>

<style scoped>
.rechange_titletxt{
  font-size: 32px;
  color:#333333;
}
.loading{
    width: 750px;
    display: flex;
    align-items: center;
   
}
.recharge_time{
  color:#999;
margin-top:5px;
  font-size:26px;
}
.recharge_rmb{
  color:#333333;
  font-size:36px;
}
  .rechargelist{
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #F5F5F5;
  }
  .fail{
    font-family: PingFangSC-Medium;
    font-size: 32px;
    color: #888888;
  }
  .nofail{
    font-family: PingFangSC-Medium;
    font-size: 32px;
    color: #333333;
  }
  .rechargelist_item{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 160px;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: rgb(245,245,245);
      background-color: white;
  }
  .rechargelist_item_fl{
      margin-left: 32px;
  }
  .rechargelist_item_fr{
      margin-right: 32px;
  }
  .rechargelist_item_fl_second{
      margin-top: 8px;
      display: flex;
      align-items: center;
      flex-direction: row;

  }
  .loading {
    width: 750px;
    height: 100px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    background-color: #333;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    background-color: #f5f5f5;
    }
  .indicator-text {
    color: #888888;
    font-size: 20px;
    text-align: center;
  }
  .indicator {
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: gray;
  }
  .norecord{
     display: flex;
     justify-content: center;
     margin-top: 164.8px;
     align-items: center;
  }

.header-con {
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  flex-direction: row;
}
.header-title {
  font-size: 34px;
  color: #fff;
  font-weight: 600;
  font-family: PingFangSC-Medium;
}

.border-bottom{
  border-bottom-color: #f1f1f1;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
</style>
